<template>
	<view>
		<view class="p-40">
			<view class="d-flex just-content-center ft14 text-color-primary">当前金币</view>
			<view class="d-flex just-content-center mt-30 ft36 ftw600">{{golds}}</view>
			<view class="d-flex just-content-center mt-40">
				<navigator :url="'/pages/my/withdraw?golds='+golds">
					<view class="bg-primary btn-money d-flex just-content-center align-items-center ft18 text-color-white ftw600">提现</view>
				</navigator>
			</view>
		</view>
		<view class="mt-40 unio2o-money">
			<view class="d-flex align-items-center p-30">
				<text class="ft18 ftw600 text-color-base">金币明细</text>
			</view>
			<view class="line"></view>
			<view class="p-30">
				<view v-if="isEmpty == true" class="pt-120 text-center">
					<view class="mt-40 ft16 text-color-assist">
						暂无金币明细
					</view>
				</view>
				<view v-else>
					<view class="pt-30" v-for="(item,index) in records" :key="item.id">
						<navigator :url="'/pages/my/goldsRecord?record_id='+item.id+'&event='+item.event">
							<view class="d-flex justify-content-between">
								<view>
									<view class="ft18 text-color-base">{{item.remarks}}</view>
									<view class="ft14 text-color-assist mt-20">{{item.created_at}}</view>
								</view>
								<view>
									<view class="ft18 text-right ftw600" :class="item.nums>0?'text-color-base':'text-color-warning'">{{item.nums}}</view>
									<view class="ft14 text-color-assist mt-20 text-right ftw500">剩余金币 {{item.balances}}</view>
								</view>
							</view>
						</navigator>
						<view class="line mt-30"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				golds:'',
				records:[],
				isEmpty:false
			}
		},
		onLoad() {
			this.getGolds();
		},
		methods:{
			async getGolds() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				});
				let res = await this.$api('golds')
				this.golds = res.data.golds;
				this.records = res.data.records;
				this.isEmpty = this.records.length==0 ? true:false;
				uni.hideLoading();	
			}
		}
	}
</script>

<style>
	.btn-money{
		width:280rpx;
		height:96rpx;
		box-shadow:0rpx 8rpx 32rpx 0rpx rgba(238,209,70,0.3);
		border-radius:48rpx;
	}
	.btn-withdraw{
		width:330rpx;
		height:96rpx;
		background:#FFFFFF;
		box-shadow:0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.08);
		border-radius:48rpx;
	}
	.unio2o-money{
		box-shadow:0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.08);
		border-radius:32rpx 32rpx 0rpx 0rpx;
		min-height: calc(100vh  - 400rpx);
		background: #FFFFFF;
	}
</style>